<template>
  <div id="app">
    <div class="page" v-for="(item, i) in mqttData" :key=i>
      <ChildrenPage :index="i" :fdata="item"></ChildrenPage>
    </div>
    <!-- <div class="page">
        <ChildrenPage index=0></ChildrenPage>
    </div>
    <div class="page">
        <ChildrenPage index=1></ChildrenPage>
    </div>
    <div class="page">
        <ChildrenPage index=2></ChildrenPage>
    </div>
    <div class="page">
        <ChildrenPage index=3></ChildrenPage>
    </div>
    <div class="page">
      <dv-border-box-11 title="黄泰霖">
        <ChildrenPage index=4></ChildrenPage>
      </dv-border-box-11>
    </div>
    <div class="page">
        <ChildrenPage index=5></ChildrenPage>
    </div> -->
  </div>
</template>

<script>
import ChildrenPage from './components/ChildrenPage'
import { emqx } from './assets/js/emqx'

export default {
  name: 'App',
  components: {
    ChildrenPage
  },
  data() {
    return {
      mqttData: []
    }
  },
  mounted() {
    emqx.subscribeTopic('mqttwebtopic', msg => {
      let userId = this.mqttData.map(d => d.name).indexOf(msg.name);
      let userData = null;
      if(userId === -1) {
        msg.loading = true;
        this.mqttData.push(msg);
        userData = this.mqttData[this.mqttData.length - 1];
      } else {
        userData = this.mqttData[userId];
      }
      if(msg.break !== null) {
        userData.loading = msg.loading;
        if(msg.loading === true) {
          userData.lamp = msg.lamp;
          userData.product = msg.product;
          userData.errRate = msg.errRate;
          userData.allProduct = msg.allProduct;
          userData.efficiency = msg.efficiency;
        }
      } 
    })
  }
}
</script>

<style>
body, html, #app {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #282C34;
}
#app {
  display: flex;
  flex-wrap:wrap;
}
.page {
  width: 100%;
  height: 60%;
  margin: 10px;
}
</style>
